<template>
    <div class="container">
        <div style="padding:10px 0;">
            <div style="padding:15px;border:1px solid #eee;">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/zhactive' }">活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ titleText }}活动</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.active_log.request">*</span>赛事logo:
                    </div>
                </el-col>
                <el-col :span="21">
                    <img-upload :img-url.sync="modelList.active_log.value"></img-upload>
                    <p style="padding:6px;color:red;font-size:12px;">200*200 正方形图片(jpg,jpeg,png格式)</p>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.title.request">*</span>{{ modelList.title.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="modelList.title.value" :placeholder="modelList.title.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.org_zuzhi.request">*</span>{{ modelList.org_zuzhi.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="modelList.org_zuzhi.value" :placeholder="modelList.org_zuzhi.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.person.request">*</span>{{ modelList.person.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="modelList.person.value" :placeholder="modelList.person.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.person_mobile.request">*</span>{{ modelList.person_mobile.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="modelList.person_mobile.value" :placeholder="modelList.person_mobile.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.addr.request">*</span>{{ modelList.addr.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input v-model="modelList.addr.value" :placeholder="modelList.addr.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.price.request">*</span>{{ modelList.price.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-input-number v-model="modelList.price.value" :precision="2" :min="0"></el-input-number>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.status.request">*</span>{{ modelList.status.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-radio-group v-model="modelList.status.value">
                        <el-radio :label="1">进行中</el-radio>
                        <el-radio :label="2">已结束</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.status_show.request">*</span>{{ modelList.status_show.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-radio-group v-model="modelList.status_show.value">
                        <el-radio :label="0">上架</el-radio>
                        <el-radio :label="1">下架</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.time_st.request">*</span>{{ modelList.time_st.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="modelList.time_st.value" type="date"
                        :placeholder="modelList.time_st.placeholder"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.time_ed.request">*</span>{{ modelList.time_ed.name }}:</div>
                </el-col>
                <el-col :span="9">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="modelList.time_ed.value" type="date"
                        :placeholder="modelList.time_ed.placeholder"></el-date-picker>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.content.request">*</span>{{ modelList.content.name }}:</div>
                </el-col>
                <el-col :span="21">
                    <el-input type="textarea" :rows="6" v-model="modelList.content.value"
                        :placeholder="modelList.content.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon"
                            v-if="modelList.active_design_phone.request">*</span>{{ modelList.active_design_phone.name }}:
                    </div>
                </el-col>
                <el-col :span="21">
                    <vue-editor :content="modelList.active_design_phone.value" ref="myTextIntro"></vue-editor>
                </el-col>
            </el-row>
        </div>
        <div class="list-group" style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
            <el-button size="medium" @click="submit(1)" style="margin-right:40px;">取 消</el-button>
            <el-button size="medium" type="primary" @click="submit(2)">确 定</el-button>
        </div>
    </div>
</template>

<script>
import global from '@/utils/global';
import vueEditor from '@/components/VueUeditorWrap/index.vue';
import ImgUpload from '@/components/imgUpload/ImgUpload.vue';
export default {
    name: 'exhibitionAdd',
    data() {
        return {
            loading: false,
            channelShow: false,
            projectArr: [],
            timer: '',
            timer1: '',
            timer2: '',
            isShow: true,
            modelList: {
                title: { value: '', request: true, name: '赛事名称', placeholder: '请输入赛事名称', type: 'input' },
                time_st: { value: '', request: true, name: '开始时间', placeholder: '请输入开始时间', type: 'input' },
                time_ed: { value: '', request: true, name: '结束时间', placeholder: '请输入结束时间', type: 'input' },
                content: { value: '', request: true, name: '赛事简介', placeholder: '请输入赛事简介', type: 'input' },
                active_log: { value: '', request: true, name: '赛事logo', placeholder: '请上传赛事logo', type: 'input' },
                status: { value: 1, request: false, name: '赛事状态', placeholder: '请输入赛事状态', type: 'input' },
                status_show: { value: 0, request: false, name: '是否下架', placeholder: '请输入是否下架', type: 'input' },
                org_zuzhi: { value: '', request: true, name: '组织单位', placeholder: '请输入组织单位', type: 'input' },
                person: { value: '', request: true, name: '联系人', placeholder: '请输入联系人', type: 'input' },
                person_mobile: { value: '', request: true, name: '联系电话', placeholder: '请输入联系电话', type: 'input' },
                price: { value: '', request: true, name: '证书价格', placeholder: '请输入证书价格', type: 'input' },
                active_design_phone: { value: '', request: true, name: '赛事详情', placeholder: '请输入赛事详情', type: 'input' },
                addr: { value: '', request: true, name: '赛事地点', placeholder: '请输入赛事地点', type: 'input' }
            },
            id: '',
            type: 0,
            judge: true,
            titleText: '新增',
            editorOption: {
                placeholder: '请输入赛事内容'
            }
        };
    },
    components: {
        vueEditor,
        ImgUpload
    },
    created() {
        this.id = this.$route.query.id; //企业id
        this.type = this.$route.query.type; //页面类型
        if (this.type == 1) {
            this.judge = false;
            this.titleText = '新增';
        } else if (this.type == 2) {
            this.judge = false;
            this.titleText = '编辑';
            this.initAjaxDetail();
        } else if (this.type == 3) {
            this.initAjaxDetail();
            this.judge = true;
            this.titleText = '查看';
        }
    },
    methods: {
        //详细信息
        initAjaxDetail() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(this.$API.ZHACTIVE_DETAIL, { id: this.id })
                .then(res => {
                    loading.close();
                    console.log('展会详细信息', res);
                    if (res.code == 1) {
                        this.modelList.title.value = res.data.title;
                        this.modelList.time_st.value = res.data.time_st ? global.getdate1(res.data.time_st) : '';
                        this.modelList.time_ed.value = res.data.time_ed ? global.getdate1(res.data.time_ed) : '';
                        this.modelList.content.value = res.data.content;
                        this.modelList.active_log.value = res.data.active_log;
                        this.modelList.active_design_phone.value = res.data.active_design_phone;
                        this.modelList.status.value = res.data.status ? Number(res.data.status) : 1;
                        this.modelList.status_show.value = res.data.status_show >= 0 ? Number(res.data.status_show) : 0;
                        this.modelList.addr.value = res.data.addr;
                        this.modelList.org_zuzhi.value = res.data.org_zuzhi;
                        this.modelList.price.value = res.data.status ? Number(res.data.price) : 0;
                        this.modelList.person.value = res.data.person;
                        this.modelList.person_mobile.value = res.data.person_mobile;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        submit(flag) {
            if (flag == 1) {
                this.$router.push({ path: '/zhactive' })
            } else {
                if (this.type == 1) {
                    this.addTepmlateAjax();
                } else {
                    this.editTepmlateAjax();
                }
            }
        },
        addTepmlateAjax() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            console.log(test);
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(this.$API.ZHACTIVE_ADD, test.data)
                .then(res => {
                    loading.close();
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('保存成功');
                        this.$router.push({ path: '/zhactive' })
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        editTepmlateAjax() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            // return false;
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(this.$API.ZHACTIVE_EDIT, test.data)
                .then(res => {
                    loading.close();
                    console.log('管理员列表', res);
                    if (res.code == 1) {
                        this.$message.success('编辑成功');
                        this.$router.push({ path: '/zhactive' })
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error(err.msg);
                });
        },
        //验证方法
        testMethod() {
            this.modelList.active_design_phone.value = this.$refs['myTextIntro'].getContent();
            let flag = true,
                msg = '',
                data = {};
            for (let i in this.modelList) {
                if (this.modelList[i].request) {
                    if (!this.modelList[i].value || this.modelList[i].value == '') {
                        flag = false;
                        msg = this.modelList[i].placeholder;
                        break;
                    }
                }
            }
            
            if (flag) {
                data = {
                    title: this.modelList.title.value,
                    time_st: this.modelList.time_st.value,
                    time_ed: this.modelList.time_ed.value,
                    content: this.modelList.content.value,
                    status: this.modelList.status.value,
                    status_show: this.modelList.status_show.value,
                    active_log: this.modelList.active_log.value,
                    active_design_phone: this.modelList.active_design_phone.value,
                    addr: this.modelList.addr.value,
                    price: this.modelList.price.value,
                    org_zuzhi: this.modelList.org_zuzhi.value,
                    person: this.modelList.person.value,
                    person_mobile: this.modelList.person_mobile.value
                };
                if (this.type == 2) {
                    data.id = this.id;
                }
            }
            return { flag: flag, data: data, msg: msg }
        }
    }
};
</script>

<style scoped>
.container{
    padding:20px 30px;
}
.list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.list-group {
    padding: 10px 0;

}

.mast-icon {
    font-size: 20px;
    color: red;
    padding: 8px 6px;
    vertical-align: middle;
}
</style>
<style>
    .edui1_toolbarbox{
        position: absolute!important;
    }
</style>